<template>
    <a-modal
      :title="title"
      :visible="serviceVisible"
      :confirm-loading="confirmLoading"
      @cancel="cancel"
      @ok="ok"
    >
    
    <a-form-model ref="editserviceModel"  :model="serviceFormDatas"  layout="vertical" 
    :labelCol="{span: 6}" :wrapperCol="{span: 16}">
        <a-form-model-item label="类型选择" prop="type">
          <a-select v-model="serviceFormDatas.type" placeholder="请选择类型">
            <a-select-option v-for="(item,index) in selects" :key="index" :value="item.id">{{item.lable}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="联系方式/地址" prop="contact">
          <a-input v-model="serviceFormDatas.contact"  placeholder="联系方式/地址" />
        </a-form-model-item>
        <a-form-model-item label="服务时间区间" prop="service_time">
          <a-time-picker v-model="serviceFormDatas.times1" valueFormat="HH:mm" format="HH:mm" />
          <span> - </span>
          <a-time-picker v-model="serviceFormDatas.times2" valueFormat="HH:mm" format="HH:mm" />
        </a-form-model-item>
        <a-form-model-item label="图标" prop="icon_url">
          <upImages  :url.sync="serviceFormDatas.icon_url"></upImages>
        </a-form-model-item>
        <a-form-model-item label="状态" >
          <a-radio-group v-model="serviceFormDatas.status">
            <a-radio :value="1"> 正常 </a-radio>
            <a-radio :value="0"> 禁用 </a-radio>
          </a-radio-group>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </template>
  
  <script>
  import { editServiceListApi,addServiceListApi } from '@/api/brand.js'
  export default {
    props:['selects'],
    data() {
      return {
        serviceVisible:false,
        title:"添加",
        confirmLoading:false,
        loading:false,

        serviceFormDatas:{
          ids:"",
          type:1,
          contact:"",
          times1:'09:00',
          times2:'21:00',
          service_time:"",
          icon_url:"",
          status:1,
        }
      }
    },
    created() {
    },
    methods: {
      openeditService(json){
        this.serviceFormDatas={
          ids:"",
          type:1,
          contact:"",
          times1:'09:00',
          times2:'21:00',
          service_time:"",
          icon_url:"",
          status:1,
        }
          this.title='添加'
        if(json){
          this.title='修改信息'
          this.serviceFormDatas={
            ids:json.id,
            type:json.type,
            contact:json.contact,
            times1:json.service_time.split("-")[0],
            times2:json.service_time.split("-")[1],
            service_time:json.service_time,
            icon_url:json.icon_url,
            status:json.status,
          }
        }
        this.serviceVisible=true
      },
      handleOk(){
        this.serviceVisible=false
      },
      cancel(){
        this.handleOk()
      },
      ok(){
        this.serviceFormDatas.service_time=this.serviceFormDatas.times1+"-"+this.serviceFormDatas.times2
        this.$refs.editserviceModel.validate(valid => {
          if (valid) {
            if(this.serviceFormDatas.ids){
              this.editLists()
            }else{
              this.addsLists()
            }
          }
        })
      },

      editLists(){
        editServiceListApi({...this.serviceFormDatas,
        brand_id: process.env.VUE_APP_BRAND_ID}).then(res=>{
          this.handleOk()
          this.$emit("changes")
        })
      },
      addsLists(){
        addServiceListApi({...this.serviceFormDatas,
        brand_id: process.env.VUE_APP_BRAND_ID}).then(res=>{
          this.handleOk()
          this.$emit("changes")
          this.$message.success("操作成功");
        })
      }



    }
  }
  </script>
  
  <style lang="less" scoped>
  .fromblock{
    display: flex;
    align-items: center;
    justify-content: space-between;
    .fromblock_blocks{
      width: 48%;
    }
  }
  </style>
  